.wrap {
  background-color: #e3e4e5;
  .heard {
    width: 100%;
    height: 64px;
    background-color: #fff;
    margin-bottom: 2px;
    .logo {
      width: 100%;
      height: 64px;
      img {
        position: relative;
        top: -8px;
        left: 6px;
      }
      .logoTitle {
        display: inline-block;
        line-height: 64px;
        height: 64px;
        font-weight: 600;
        font-size: 30px;
        margin-left: 10px;
      }
    }
  }
  .ant-tabs-nav-wrap {
    background-color: #fff !important;
  }
  .ant-tabs-content-holder {
    background-color: #fff;
  }
}

.fr-generator-container {
  .w5-l,
  .pl2 {
    width: 22rem !important;
  }
}
.pl0 {
  // background-color: #e3e4e5 !important;
  list-style-type: none !important;
  // width: 270px !important;
}

.left-item {
  width: 80px !important;
  margin: 0 !important;
  height: 74px !important;
  position: relative !important;
  border: 1px solid #e3e4e5;
}

.left-item:hover {
  border: 1px solid #e3e4e5 !important;
}

.ant-tabs-left {
  .ant-tabs-nav {
    min-width: 50px !important;
  }
  .ant-tabs-tab {
    padding: 10px !important;
  }
}

.fr-generator-playground {
  margin: 0 -24px;
  .hide-demo {
    display: none;
  }
}

.icon-wrap {
  width: 78px;
  height: 70px;
  background-color: #fff;
  text-align: center;
  .img-wrap {
    padding-top: 10px;
    height: 40px;
    img {
      height: 28px;
      width: 28px;
    }
  }
}

.fr-generator-container .right-layout {
  padding-top: 0px !important;
}

.fr-generator-container .absolute {
  position: relative !important;
}
.fr-generator-container .flex-center {
  align-items: flex-end !important;
}

.left-layout {
  padding: 10px 0 0 8px !important;
}

.icon-wrap:hover {
  box-shadow: 0px 0px 3px #909090;
}

.ant-tabs-left
  > .ant-tabs-content-holder
  > .ant-tabs-content
  > .ant-tabs-tabpane,
.ant-tabs-left
  > div
  > .ant-tabs-content-holder
  > .ant-tabs-content
  > .ant-tabs-tabpane {
  padding-left: 0px !important;
}
